<template>
	<view class="li-statistics-chart">
		<view class="sub-title">{{ title ? title : cd.title }}</view>
		<view class="charts-box">
			<qiun-data-charts :type="cd.type ? cd.type : type" :opts="opts" :chartData="cd" :canvas2d="false" />
		</view>
	</view>
</template>
<script>
export default {
	name: 'LiStatisticsChart',
	props: {
		title: {
			type: String
		},
		cd: {
			required: true
		},
		canvas2d: {
			type: Boolean,
			default: true
		},
		type: {
			type: String,
			default: 'column'
		},
		opts: {
			default: {
				padding: [15, 6, 0, 6],
				enableScroll: false,
				legend: { show: false },
				xAxis: {
					disableGrid: true,
					fontSize: 12,
					rotateLabel: true,
					marginTop: 10
				},
				yAxis: {
					data: [
						{
							min: 0
						}
					]
				},

				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
						seriesGap: 5,
						barBorderRadius: [6, 6, 6, 6]
					}
				}
			}
		}
	},
	data() {
		return {};
	},
	methods: {}
};
</script>
<style lang="scss" scoped>
.li-statistics-chart {
	border-radius: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 20rpx;
	background-color: #fff;

	.charts-box {
		width: 100%;
		height: 300px;
	}

	.sub-title {
		font-size: 18px;
		font-weight: bold;
		margin: 8px 0;
	}
}
</style>
